<template>
	<label id="labelr" class="pop_file file_cont" for="pop_video">
	    <div class="pfevi">
	        <div><i class="iconfont icon-tianjia1"></i></div>
	        <div>点击上传视频</div>
	    </div>
	    <video width="100%" height="auto" ref="videoId" id="videoId"></video>
	    <input ref="pop_video" style="display: none;" id="pop_video" type="file" @change="uploadFile($event,'2')" name="fileTrans" value="" />
	</label>
</template>

<script>
// 忽略eslint
// eslint-disable-next-line
/* eslint-disable */
export default {
	name: 'inputVideo',
	data() {
		return {

		}
	},
	methods: {
		uploadFile(ev, typer) {
		    var that = this;
		//     var filesId = document.getElementById('pop_video');
		//     var videoId = document.getElementById('videoId');
			var filesId = this.$refs.pop_video;
			var videoId = this.$refs.videoId;
		    var url = that.getFileURL(filesId.files[0]); //把当前的 files[0] 传进去
		    if(url) {
		        videoId.src = url;
		    }

			var duration = videoId.duration;
		    if(Math.floor(duration) > 60) {
		        that.$layer.msg('视频不能大于60秒');
		    }
		},
		getFileURL(file) {
	        var getUrl = null;
	        if(window.createObjectURL != undefined) { // basic
	            getUrl = window.createObjectURL(file);
	        } else if(window.URL != undefined) { // mozilla(firefox)
	            getUrl = window.URL.createObjectURL(file);
	        } else if(window.webkitURL != undefined) { // webkit or chrome
	            getUrl = window.webkitURL.createObjectURL(file);
	        }
	        return getUrl;
	    }
	}
}
</script>

<style scoped>
.pop_file {
    width: 370px;
    height: 188px;
    margin: 0 0 0 30px;
    display: block;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(153, 153, 153, 1);
    background: rgba(247, 247, 247, 1);
    position: relative;
}
.pop_file video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}	
</style>